{% extends "admin/common/base.html" %}

{% block title %}新建blog{% endblock %}

{% block top_css %}
    <link rel="stylesheet" href="/admin/edit-md/css/editormd.css"/>
    <style>
        .center {
            display: block;
            width: 100%;
        }

        .center button {
            float: right;
            margin-left: 10px;
        }

        .my-autocomplete {

        li {
            line-height: normal;
            padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }

        }
        }

        .el-tag + .el-tag {
            margin-left: 10px;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="row">

        <div id="md-editor">
            <textarea style="display:none;" placeholder="{{ article.content }}">{{ article.content }}</textarea>
        </div>
        <div class="center">
            <button @click="saveArticle" id="submitBlog" type="button"
                    class="btn btn-purple btn-info waves-effect waves-light w-md m-b-5">
                提交
            </button>
            <button @click="saveToDraft" id="draftBlog" type="button"
                    class="btn btn-purple btn-info waves-effect waves-light w-md m-b-5">
                草稿
            </button>
        </div>
    </div>

{% endblock %}

{% block bottom_js %}
    <script src="/common/js/jquery.min.js"></script>
    <script src="/admin/edit-md/editormd.min.js"></script>
{% endblock %}

{% block bottom_script %}
    <script>
        let app = new Vue({
            el: '#wrapper',
            data: {
                mdEditor: {},
                article: {
                    document_type: 'markdown',
                    group_id: '{{article.group_id}}',
                    resources: [],
                    pic_url: '',
                    content: "",
                    uuid: '{{article.uuid}}'
                },
                inputVisible: false,
                inputValue: '',
                restaurants: [],
                state: '',
                timeout: null
            },
            methods: {
                saveToDraft() {
                    this.article.is_draft = true;
                    this.article["content"] = this.mdEditor.getMarkdown();
                    request({
                        url: baseUrl + "/api/article",
                        method: 'post',
                        data: this.article,
                    }).then((response) => {
                        console.log(response)
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                saveArticle() {
                    this.article["content"] = this.mdEditor.getMarkdown();
                    request({
                        url: baseUrl + "/api/article/edit_about_me",
                        method: 'post',
                        data: this.article,
                    }).then((response) => {
                        if (response.data == 'success') {
                            window.location.href = "/admin/article_manage/1";
                        } else {
                            alert("发布失败");
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                createEditor() {
                    this.mdEditor = editormd("md-editor", {
                        width: "100%",
                        height: 500,
                        syncScrolling: "single",
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL: "/api/upload",
                        emoji: true,
                        path: "/admin/edit-md/lib/",
                        onload: () => {
                            // 引入插件 执行监听方法
                            editormd.loadPlugin("/admin/edit-md/plugins/image-handle-paste/image-handle-paste", () => {
                                this.mdEditor.imagePaste();
                            });
                            // 引入插件 执行监听方法
                            editormd.loadPlugin("/admin/edit-md/plugins/code-auto-save/code-auto-save", () => {
                                // 初始化插件 实现监听
                                this.mdEditor.CodeAutoSave();
                            });
                        },


                        // 工具栏添加一个自定义方法
                        toolbarIcons: function () {
                            // 给工具栏full模式添加一个自定义方法
                            return editormd.toolbarModes.full.concat(["customIcon"]);
                        },
                        // 自定义方法的图标 指定一个FontAawsome的图标类
                        toolbarIconsClass: {
                            customIcon: "fa-paste"
                        },
                        // 没有图标可以插入内容，字符串或HTML标签
                        toolbarIconTexts: {
                            customIcon: "从草稿箱加载"
                        },
                        // 图标的title
                        lang: {
                            toolbar: {
                                customIcon: "从草稿箱加载"
                            }
                        },
                        // 自定义工具栏按钮的事件处理
                        toolbarHandlers: {
                            customIcon: () => {
                                // 读取缓存内容
                                this.mdEditor.CodeAutoSaveGetCache();
                            }
                        }
                    });
                },
            },
            mounted: function () {
                this.createEditor();
            }
        })


    </script>

{% endblock %}